<template>
  <view class="container">
    <u-navbar
      id="nav-bar"
      :is-back="true"
      :background="{ background: '#ffffff' }"
      :border-bottom="false"
      title=" "
    >
      <view class="segmentedBox">
        <u-subsection
          :list="subsectionList"
          :current="subsectionIndex"
          bgColor="#f5f5f5"
          @change="subsectionChange"
        >
        </u-subsection>
      </view>
    </u-navbar>

    <view class="searchBox">
      <u-search
        placeholder="请输入SN/商户名称搜索"
        v-model="keyword"
        bgColor="#F7F7F7"
        shape="square"
        @change="searchChange"
      ></u-search>
    </view>

    <view class="dataBox">
      <image
        class="dataBox-bg"
        src="/static/images/myServiceProvider-dataShow.png"
        mode="widthFix"
      ></image>

      <view class="dataBox-content">
        <view class="header">
          <view class="value">12534</view>
          <view class="label">团队总合伙人数(人)</view>
        </view>
        <view class="bottom">
          <view class="item">
            <view class="label">直属合伙人数</view>
            <view class="value">12</view>
            <view class="compare">较上月 <text class="up">+12</text></view>
          </view>
          <view class="item">
            <view class="label">下级团队合伙人数</view>
            <view class="value">51</view>
            <view class="compare">较上月 <text class="down">-3</text></view>
          </view>
        </view>
      </view>
    </view>

    <view class="row">
      <view class="total">
        <text>总计(584户)</text>
        <image src="/static/images/icon-tzgg.png" mode="widthFix"></image>
      </view>
      <view @click="showPicker = true" class="sort">
        <text>交易额(由高到低)</text>
        <u-icon name="arrow-down" color="#333333" size="28"></u-icon>
      </view>
    </view>

    <view class="sections">
      <view class="section" @click="navigateTo('/pages/home/serviceProviderDetails')">
        <image class="status" src="/static/images/icon-wsm.png" mode="widthFix"></image>

        <view class="section-header">
          <view class="left">
            <image class="avatar" src="/static/images/logo.png" mode="widthFix"></image>
            <view class="info">
              <view class="name">张三三</view>
              <view class="phone">18888888888</view>
            </view>
          </view>
          <view class="right">
            <view class="level">
              <image
                class="levelImg"
                src="/static/images/my-level7.png"
                mode="widthFix"
              ></image>
              <text class="levelText">M7</text>
            </view>
            <view class="tip">分润等级共享</view>
          </view>
        </view>

        <view class="section-item">
          <view class="section-item_in">
            <view class="item-value">87.69</view>
            <view class="item-label">团队本月总交易额(万)</view>
          </view>
        </view>

        <view class="section-item">
          <view class="section-item_in">
            <view class="item-value">87.69</view>
            <view class="item-label">团队上月总交易额(万)</view>
          </view>
        </view>

        <view class="section-item">
          <view class="section-item_in">
            <view class="item-value">124</view>
            <view class="item-label">团队总商户数(户)</view>
          </view>
        </view>

        <view class="section-item">
          <view class="section-item_in">
            <view class="item-value">24</view>
            <view class="item-label">团队本月新增商户(户)</view>
          </view>
        </view>

        <view class="section-item">
          <view class="section-item_in">
            <view class="item-value">31</view>
            <view class="item-label">团队总合伙人数(人)</view>
          </view>
        </view>

        <view class="section-item">
          <view class="section-item_in">
            <view class="item-value">6</view>
            <view class="item-label">团队本月新增合伙人(人)</view>
          </view>
        </view>
      </view>
    </view>
    <u-picker
      v-model="showPicker"
      mode="selector"
      :range="selector"
      @confirm="pickerConfirm"
    ></u-picker>
  </view>
</template>

<script>
import util from '@/common/utils.js';

export default {
  data() {
    return {
      currentTab: 0,
      keyword: '',
      subsectionList: [
        {
          name: '已实名',
        },
        {
          name: '未实名',
        },
      ],
      subsectionIndex: 0,
      showPicker: false,
      selector: [1, 2, 3],
    };
  },
  onLoad(e) {},
  methods: {
    subsectionChange(index) {
      this.subsectionIndex = index;
    },
    searchChange(value) {},
    navigateTo(url) {
      uni.navigateTo({
        url: url,
      });
    },
    pickerConfirm(value) {},
  },
};
</script>

<style lang="scss" scope>
.container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding: 0 0 60rpx;
  background-color: #f5f5f5;
  box-sizing: border-box;
  .bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
  }
  .segmentedBox {
    position: absolute;
    top: 10rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 300rpx;
    z-index: 99;
  }
}

.searchBox {
  padding: 10rpx 30rpx;
  background-color: #ffffff;
}

.dataBox {
  position: relative;
  margin-top: 30rpx;
  width: 100%;
  padding: 0 30rpx;
  .dataBox-bg {
    width: 100%;
    height: auto;
  }
  .dataBox-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 50rpx 60rpx 50rpx;
    line-height: 1;
    .header {
      width: 100%;
      text-align: left;
      .value {
        font-family: DIN, sans-serif;
        font-weight: bold;
        font-size: 48rpx;
        color: #ffeacc;
      }
      .label {
        margin-top: 20rpx;
        font-weight: 400;
        font-size: 24rpx;
        color: rgba($color: #ffffff, $alpha: 0.5);
      }
      .btn {
        position: absolute;
        top: 65rpx;
        right: 60rpx;
        width: 238rpx;
        height: auto;
      }
    }
    .bottom {
      display: flex;
      justify-content: space-between;
      margin-top: 50rpx;
      text-align: center;
      .item {
        flex: 1;
        min-width: 0;
        .label {
          font-family: PingFang SC, sans-serif;
          font-weight: 400;
          font-size: 22rpx;
          color: rgba($color: #ffffff, $alpha: 0.5);
        }
        .value {
          margin-top: 10rpx;
          font-family: DIN, sans-serif;
          font-weight: bold;
          font-size: 32rpx;
          color: #ffeacc;
        }
        .compare {
          margin-top: 10rpx;
          font-family: PingFang SC, sans-serif;
          font-weight: 400;
          font-size: 22rpx;
          color: #ffffff;
          .up {
            color: #f03434;
          }

          .down {
            color: #29cc7a;
          }
        }
      }
    }
  }
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.total {
  position: relative;
  display: inline-block;
  margin-top: 20rpx;
  padding: 0 30rpx;
  width: auto;
  text {
    position: relative;
    font-weight: 800;
    font-size: 28rpx;
    color: #333333;
    z-index: 9;
  }
  image {
    position: absolute;
    top: -5rpx;
    right: 10rpx;
    width: 32rpx;
    height: 32rpx;
    z-index: 1;
  }
}

.sort {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: 20rpx;
  padding: 0 30rpx 0 60rpx;
  width: auto;
  font-weight: 400;
  font-size: 28rpx;
  color: #333333;
  text {
    margin-right: 10rpx;
  }
}

.sections {
  width: 100%;
  padding: 0 30rpx;

  .section {
    position: relative;
    margin-top: 20rpx;
    padding: 30rpx 20rpx;
    background: #ffffff;
    border-radius: 20rpx;
    overflow: hidden;
    .status {
      position: absolute;
      top: 0;
      left: 0;
      width: 104rpx;
      height: 28rpx;
    }
    .section-header {
      display: flex;
      justify-content: space-between;
      width: 100%;
      padding: 0 10rpx;
      .avatar {
        width: 98rpx;
        height: 98rpx;
        border-radius: 50%;
      }
      .left {
        display: flex;
        justify-content: space-between;
        .info {
          padding-right: 20rpx;
          text-align: left;
          line-height: 1;
          .name {
            font-weight: 800;
            font-size: 28rpx;
            color: #333333;
          }
          .phone {
            margin-top: 20rpx;
            font-family: DIN;
            font-weight: bold;
            font-size: 32rpx;
            color: #333333;
          }
        }
      }
      .right {
        .level {
          display: flex;
          justify-content: flex-end;
          .levelImg {
            margin-right: 8rpx;
            width: 48rpx;
            height: 42rpx;
          }
          .levelText {
            font-weight: bold;
            font-size: 28rpx;
            color: #333333;
          }
        }

        .tip {
          margin-top: 12rpx;
          font-weight: 500;
          font-size: 24rpx;
          color: #b7926e;
        }
      }
    }
    .section-item {
      float: left;
      width: 50%;
      padding: 10rpx;
      line-height: 1;
      .section-item_in {
        width: 100%;
        padding: 30rpx;
        background: #f5f5f5;
        border-radius: 16rpx;
        .item-value {
          width: 100%;
          font-family: DIN;
          font-weight: bold;
          font-size: 32rpx;
          color: #222222;
        }
        .item-label {
          margin-top: 20rpx;
          width: 100%;
          font-weight: 400;
          font-size: 24rpx;
          color: #999999;
        }
      }
    }
  }
}

.mb30 {
  margin-bottom: 30rpx;
}

.mt30 {
  margin-top: 30rpx;
}
</style>
